<template>
    <el-row style="margin-top:10px;">
        <el-col :span="3"><div class="grid-content"></div></el-col>
        <el-col :span="18">
            <div class="grid-content" style="min-height:500px;">
                <template>
                    <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="150px" class="demo-ruleForm">
                        <el-form-item label="财务计划名称" prop="plan" required>
                            <el-input v-model="ruleForm.plan"></el-input>
                        </el-form-item>
                        <el-form-item label="开始日期">
                            <el-form-item prop="start_date">
                                <el-date-picker type="date" placeholder="选择开始日期" v-model="ruleForm.start_date" style="width: 100%;"></el-date-picker>
                            </el-form-item>
                        </el-form-item>
                        <el-form-item label="结束日期">
                            <el-form-item prop="end_date">
                                <el-date-picker type="date" placeholder="选择结束日期" v-model="ruleForm.end_date" style="width: 100%;"></el-date-picker>
                            </el-form-item>
                        </el-form-item>
                        <el-form-item label="计划金额操作标准" prop="standard_money">
                            <el-input v-model="ruleForm.standard_money"></el-input>
                        </el-form-item>
                        <el-form-item label="计划结束标志" prop="end_mk">
                            <el-input v-model="ruleForm.end_mk"></el-input>
                        </el-form-item>
                        <el-form-item label="周期" prop="cycle">
                            <el-input v-model="ruleForm.cycle"></el-input>
                        </el-form-item>
                        <el-form-item label="周期单位" prop="cycle_unit">
                            <el-input v-model="ruleForm.cycle_unit"></el-input>
                        </el-form-item>
                        <el-form-item>
                            <el-button type="primary" @click="submitForm('ruleForm')">立即创建</el-button>
                            <el-button @click="resetForm('ruleForm')">重置</el-button>
                        </el-form-item>
                    </el-form>
                </template>
            </div>
        </el-col>
        <el-col :span="3"><div class="grid-content"></div></el-col>
    </el-row>
</template>

<script>
    import Main from './main.js'
    export default {
      data() {
        return {
          ruleForm: {
            plan: '',
            start_date: this.$c.cndate(),
            end_date: '',
            standard_money: '',
            end_mk: '',
            cycle: '',
            cycle_unit: ''                   
          },
          rules: {
            plan: [
              { required: true, message: '请输入【财务计划名称】', trigger: 'blur' }
            ]
          }
        };
      },
      methods: {
        submitForm(formName) {
          var pager = this.$route.name;
          if('view' == pager){
              return this.$message({
                  showClose: true,
                  message: '您在在查看数据，查看数据时不能更新数据！',
                  type: 'warning'
              });
          }
          this.$refs[formName].validate((valid) => {
            if (valid) {
              //alert('submit!');
              var formData = this.$refs[formName].model;
            //   console.log(formData);
              if('edit' == pager){
                  formData['plan_no'] = this.$route.params.no;
              }
              this.$c.PigeonsPost('finance/plan/add',
                  formData,
                  (result)=>{
                      this.$message({
                          showClose: true,
                          message: result.msg,
                          type: 'success'
                      });
                      if(200 == result){
                          //this.$refs[formName].resetFields();
                      }
                  },
                  (error, httpMK)=>{
                      this.$message({
                          showClose: true,
                          message: error,
                          type: 'error'
                      });
                  },
                  ()=>{}
              );
            } else {
              console.log('error submit!!');
              return false;
            }
          });
        },
        resetForm(formName) {
          this.$refs[formName].resetFields();
        }
      },
      created () {
        //console.log(this.$route)
        var name = this.$route.name;
        if('edit' == name || 'view' == name){
            Main.loadSinglerList(this, this.$route.params);
        }
    }
    }
  </script>